scripty2

namespace S2.FX.Transitions

Description

Transitions can fine-tune how an effect evolves over time. All effects, without the use of transitions, normally evolve linearily.

All transitions take a position argument, which is between 0 (start of effect) and 1 (end of effect). Transitions return a number, which is a "translation" of position argument. The return value can, depending on transition type, be above 1 or below 0.

By using Transitions, it is easily possible to add movement easing, pulsation, bouncing, reversal and other forms of special effects.

Default transition

S2.FX.Transitions.sinusoidal is used. This setting can be changed by redefining S2.FX.DefaultOptions.transition.

Implementing your own transitions

Transitions can easily be added, by using this template: Object.extend(S2.FX.Transitions, { myTransition: function(pos) { return pos; // do your calculations here! } }); Transitions defined this way automatically become available to be used with the shorthand syntax for the `options.transition` argument: $('some_element').morph('left:300px', { transition: 'myTransition' });

Notice

The equations defined in penner.js are open source under the BSD License. Easing Equations © 2003 Robert Penner, all rights reserved.

Methods

Class methods

  • S2.FX.Transitions.blink(pos[, blinks]) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)
    • pulses (Number) – Number of blinks, defaults to 5

    Effect blinks on and off.

  • bounce #

    S2.FX.Transitions.bounce(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • bouncePast #

    S2.FX.Transitions.bouncePast(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeFrom #

    S2.FX.Transitions.easeFrom(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeFromTo #

    S2.FX.Transitions.easeFromTo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInBack #

    S2.FX.Transitions.easeInBack(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInCirc #

    S2.FX.Transitions.easeInCirc(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInCubic #

    S2.FX.Transitions.easeInCubic(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInExpo #

    S2.FX.Transitions.easeInExpo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutBack #

    S2.FX.Transitions.easeInOutBack(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutCirc #

    S2.FX.Transitions.easeInOutCirc(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutCubic #

    S2.FX.Transitions.easeInOutCubic(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutExpo #

    S2.FX.Transitions.easeInOutExpo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutQuad #

    S2.FX.Transitions.easeInOutQuad(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutQuart #

    S2.FX.Transitions.easeInOutQuart(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutQuint #

    S2.FX.Transitions.easeInOutQuint(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInOutSine #

    S2.FX.Transitions.easeInOutSine(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInQuad #

    S2.FX.Transitions.easeInQuad(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInQuart #

    S2.FX.Transitions.easeInQuart(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInQuint #

    S2.FX.Transitions.easeInQuint(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeInSine #

    S2.FX.Transitions.easeInSine(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutBack #

    S2.FX.Transitions.easeOutBack(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutBounce #

    S2.FX.Transitions.easeOutBounce(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutCirc #

    S2.FX.Transitions.easeOutCirc(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutCubic #

    S2.FX.Transitions.easeOutCubic(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutExpo #

    S2.FX.Transitions.easeOutExpo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutQuad #

    S2.FX.Transitions.easeOutQuad(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutQuart #

    S2.FX.Transitions.easeOutQuart(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutQuint #

    S2.FX.Transitions.easeOutQuint(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeOutSine #

    S2.FX.Transitions.easeOutSine(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • easeTo #

    S2.FX.Transitions.easeTo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • elastic #

    S2.FX.Transitions.elastic(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • flicker #

    S2.FX.Transitions.flicker(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    Effect flickers along a sine wave.

  • full #

    S2.FX.Transitions.full() -> Number

    No transition, the effect is always in final state (returns 1 regardless of input values).

  • linear #

    S2.FX.Transitions.linear(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    Basic linear transition, no easing or other alteration of the effect.

  • mirror #

    S2.FX.Transitions.mirror(pos[, transition]) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)
    • transition (Function) – a S2.FX.Transitions transition function

    The given transition is mirrored. Defaults to S2.FX.Transitions.sinusoidal.

    You can use other transitions as per the following code sample:

    $('element_id').morph('font-size:200px', {
  transition: function(pos){
    return S2.FX.Transitions.mirror(pos, S2.FX.Transitions.bounce);
  }
});

    If you plan to reuse such a mirrored transition often, define your own transition function:

    S2.FX.Transitions.mirroredBounce = function(pos){
  return S2.FX.Transitions.mirror(pos, S2.FX.Transitions.bounce);
});

$('element_id').morph('font-size:200px', { transition: 'mirroredBounce' });

  • none #

    S2.FX.Transitions.none() -> Number

    No transition, the effect stays in intial state (returns 0 regardless of input values).

  • pulse #

    S2.FX.Transitions.pulse(pos[, pulses]) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)
    • pulses (Number) – Number of pulses, defaults to 5

    Effect pulses along a sinusoidal transition.

  • reverse #

    S2.FX.Transitions.reverse(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    Effect is executed in a reverse linear fashion.

  • sinusoidal #

    S2.FX.Transitions.sinusoidal(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    Alters the effect timing to be aligned to a sine wave.

  • spring #

    S2.FX.Transitions.spring(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    Alters the effect timing to a "spring".

  • swingFrom #

    S2.FX.Transitions.swingFrom(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • swingFromTo #

    S2.FX.Transitions.swingFromTo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • swingTo #

    S2.FX.Transitions.swingTo(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

  • webkitCubic #

    S2.FX.Transitions.webkitCubic(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    The default WebKit CSS transition easing function.

  • webkitEaseInOut #

    S2.FX.Transitions.webkitEaseInOut(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    The WebKit CSS transition "ease-in-out" easing function.

  • wobble #

    S2.FX.Transitions.wobble(pos) -> Number
    • pos (Number) – position between 0 (start of effect) and 1 (end of effect)

    Effect wobbles increasingly fast between start and end positions.